<template>
  <Layer :layer="layer" @confirm="submit" ref="layerDom">
    <el-form ref="importform" label-width="100">
      <el-form-item label="导入说明：">
        <span style="color: red;">导入将在原有数据上新增，不会影响原始数据</span>
      </el-form-item>
      <el-form-item label="导入模板：">
        <el-button type="primary" link @click="downloadExcelTemplate"><i class="el-icon-download"></i>点击下载</el-button>
      </el-form-item>
      <el-form-item label="导入文件：">
        <el-upload class="upload-demo" accept=".xlsx" :limit="1" drag action="/api/attendance/import-attendance"
          :headers=headers :on-success=handleUpload>
          <el-icon class="el-icon--upload"><upload-filled /></el-icon>
          <div class="el-upload__text">
            将文件拖动到这里或者 <em>点击上传</em>
          </div>
        </el-upload>
      </el-form-item>
      <el-form-item label="导入结果：">
        {{ importMsg }}
      </el-form-item>
    </el-form>
  </Layer>
</template>

<script lang="ts">
import store from "@/store";
import type { LayerType } from '@/components/layer/index.vue'
import type { Ref } from 'vue'
import type { ElFormItemContext } from 'element-plus/lib/el-form/src/token'
import { defineComponent, ref } from 'vue'
import { downloadTemplate } from '@/api/attendance/record'
import { userData, statusData } from './enum'
import Layer from '@/components/layer/index.vue'
import { ElMessage } from 'element-plus'
import { UploadFilled } from '@element-plus/icons-vue'
export default defineComponent({
  components: {
    Layer,
    UploadFilled
  },
  props: {
    layer: {
      type: Object,
      default: () => {
        return {
          show: false,
          title: '',
          showButton: true
        }
      }
    }
  },
  setup(props, ctx) {
    const ruleForm: Ref<ElFormItemContext | null> = ref(null)
    const layerDom: Ref<LayerType | null> = ref(null)
    let form = ref({
      userName: '',
      recordDate: '',
      clockInTime: '',
      clockOutTime: '',
      status: '',
    }) 
    const headers = ref({
      "Authorization": "Bearer " + store.state.user.token,
      "X-Authorization": "Bearer " + store.state.user.refreshToken
    })

    const importMsg = ref('')
    const handleUpload = (response: any) => {
      if(response.statusCode === 200){
        importMsg.value = response.data
        ctx.emit('getTableData', true)
      }else{
        importMsg.value = response.errors
      }
    }
    // 下载模板
    const downloadExcelTemplate = () => {
      downloadTemplate()
        .then(res => {
          if (res) {
            ElMessage({
              type: 'success',
              message: '下载成功'
            })
          }
        })
    }
    return {
      UploadFilled,
      form,
      importMsg,
      layerDom,
      ruleForm,
      userData,
      statusData,
      headers,
      handleUpload,
      downloadExcelTemplate
    }
  },
  methods: {
    submit() {
    },
  }
})
</script>

<style lang="scss" scoped></style>